
import { DatePicker, Input, Select, Option, RadioGroup, Radio, Checkbox, CheckboxGroup, Switch } from 'element-ui'
const normalizeVnode = (h, config, model, value, _this) => {
  const { label, type, key, inner, ext, mutable = true } = config
  let vnode
  switch (type) {
    case 'text': {
      vnode = value
      break
    }
    case 'date': {
      if (mutable) {
        vnode = (
          <DatePicker
            placeholder={ inner?.props?.placeholder ? inner.props.placeholder : `请选择${label}` }
            value={value}
            onInput={val => {
              if (Array.isArray(key)) {
                key.forEach((e, i) => {
                  _this.$set(model, e, val ? val[i] : '')
                })
              } else {
                _this.$set(model, key, val)
              }
            }}
            {...inner}
          />
        )
      } else {
        if (Array.isArray(value) && value.length === 2 && value[0] !== '') {
          vnode = [value[0] + ' - ' + value[1]]
        } else {
          vnode = [value]
        }
      }
      break
    }
    case 'select': {
      const { options, resetKeys } = ext || {}
      const fileds = ['label', 'value']
      if (resetKeys?.constructor === Object) {
        if (Object.prototype.hasOwnProperty.call(resetKeys, 'label')) fileds[0] = resetKeys.label
        if (Object.prototype.hasOwnProperty.call(resetKeys, 'value')) fileds[1] = resetKeys.value
      }
      if (mutable) {
        let optionVNodes = []
        if (options) {
          optionVNodes = options.map(op => {
            return (
              <Option value={op[fileds[1]] ? op[fileds[1]] : op.value} label={op[fileds[0]] ? op[fileds[0]] : op.label} key={op[fileds[1]] ? op[fileds[1]] : op.value} disabled={op.disabled || false}/>
            )
          })
        }
        vnode = (
          <Select
            placeholder={ inner?.props?.placeholder ? inner.props.placeholder : `请选择${label}` }
            value={value}
            on={{
              change: val => {
                _this.$set(model, key, val)
              },
              focus: val => {
                // console.log('获得焦点', val)
              }
            }}
            {...inner}
          >
            {optionVNodes}
          </Select>
        )
      } else {
        if (!value) return ''
        if (typeof value === 'object') {
          value = options.filter(e => {
            return value.includes(e[fileds[1]] ? e[fileds[1]] : e.value)
          }).map(e => e[fileds[0]] ? e[fileds[0]] : e.label).join('、')
        } else {
          value = options.find(e => {
            return value === (e[fileds[1]] ? e[fileds[1]] : e.value)
          })
          if (value) value = value[fileds[0] ? fileds[0] : 'label']
        }
        vnode = [value]
      }
      break
    }
    case 'input': {
      if (mutable) {
        vnode = (
          <Input
            placeholder={ inner?.props?.placeholder ? inner.props.placeholder : `请输入${label}` }
            value={value}
            onInput={val => {
              _this.$set(model, key, val)
            }}
            {...inner}
          >
          </Input>
        )
      } else {
        vnode = [value]
      }
      break
    }
    case 'radio': {
      if (mutable) {
        const { options } = ext || {}
        const optionVNodes = options.map(op => {
          return (
            <Radio
              // value={op.value}
              label={op.value}
              disabled={op.disabled || false}
            >
              {op.label}
            </Radio>
          )
        })
        vnode = (
          <RadioGroup
            value={value}
            on={{
              input: val => {
                _this.$set(model, key, val)
              }
            }}
          >
            {optionVNodes}
          </RadioGroup>
        )
      } else {
        const { options } = ext || {}
        value = value && options.filter(e => {
          return value.includes(e.value)
        }).map(e => e.label)
        vnode = [value]
      }
      break
    }
    case 'checkbox': {
      if (mutable) {
        const { options } = ext || {}
        const optionVNodes = options.map(op => {
          return (
            <Checkbox
              // value={op.value}
              label={op.value}
              disabled={op.disabled || false}
            >
              {op.label}
            </Checkbox>
          )
        })
        vnode = (
          <CheckboxGroup
            value={value}
            on={{
              input: val => {
                _this.$set(model, key, val)
              }
            }}
          >
            {optionVNodes}
          </CheckboxGroup>
        )
      } else {
        const { options } = ext || {}
        value = value && options.filter(e => {
          return value.includes(e.value)
        }).map(e => e.label).join('、')
        vnode = [value]
      }
      break
    }
    case 'switch': {
      if (mutable) {
        vnode = (
          <Switch
            props={{
              value: value
            }}
            on={{
              change: val => {
                _this.$set(model, key, val)
              }
            }}
          />
        )
      } else {
        vnode = [value ? '开启' : '关闭']
      }
      break
    }
    default: {
      return undefined
    }
  }
  return vnode
}
export default normalizeVnode
